import { Router, Route, Switch, Redirect } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import './App.scss';
import { AuthRoute } from './components/AuthRoute';
import customHistory from './utils/history';
import { Spin } from 'antd';
// 路由懒加载处理
const Layout = lazy(() => import('@/pages/Layout'));
const Login = lazy(() => import('@/pages/Login'));
const NotFound = lazy(() => import('@/pages/NotFound'));

function App() {
  return (
    // 使用自己封装的路由，方便在其他环境里面使用路由跳转，比如http里面
    <Router history={customHistory}>
      <Suspense
        fallback={
          <div className="loading">
            <Spin tip="加载中" />
          </div>
        }
      >
        <div className="app">
          <Switch>
            {/* exact 表示该路由规则需要精准匹配
          Redirect 路由重定向组件 */}

            <Route
              path="/"
              exact
              render={() => <Redirect to="/home" />}
            ></Route>
            <AuthRoute path="/home" component={Layout} />
            {/* <Route path="/home" component={Layout} /> */}
            <Route path="/login" component={Login} />

            {/* 404 */}
            <Route>
              <NotFound></NotFound>
            </Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  );
}

export default App;
